﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>变色方块（原创）</title>
<script src="../js/jquery.min.js"></script>
<style>
.box {
	width:400px;
	height:500px;
	margin:auto;
	position:relative;
}
li {
	float:left;
	list-style:none;
	width:100px;
	height:100px;
	background:red;
	margin-left:20px;
	margin-top:30px;
}
input {
	position:absolute;
	left:90px;
}
.ipt {
	left:20px;
}
</style>
</head>
<body>
<div class="box">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <input type="button" value="开始" class="ipt">
    <input type="button" value="结束">
</div>

<script>
var oLi = document.getElementsByTagName('li')
console.log(oLi)
var oIpt = document.getElementsByTagName('input')
var timer;
var Color = ['yellow', 'red', 'black', 'skyblue', 'green', 'pink']
oIpt[0].onclick = function() {
    // for(var i=0;i<oLi.length;i++){
    // oLi[i].index=i
    timer = setInterval(function() {
        // setInterval: 以固定的时间间隔重复调用一个函数或者代码段
        // 				for(var i=0;i<oLi.length;i++){
        // 					oLi[i] .style.background='red'
        // 				}
        var x = parseInt(Math.random() * oLi.length)
        //Math.random()返回（0-1）之间的随机数
        var y = parseInt(Math.random() * Color.length)
        oLi[x].style.background = 'yellow'
        oLi[x].style.background = Color[y]
    }, 10)
    // }


}
oIpt[1].onclick = function() {
    clearInterval(timer)
    // 将定时器停止，但是timer变量本身还是存在的
    if (oLi[4].style.background == 'red') {
        alert('中奖了')
    }

}
</script>

</body>
</html>
